<!--当日收款详情-->
<template>
  <div class="n-register">
    <van-nav-bar :title="header" left-arrow @click-left="onClickLeft" />
    <div class="dhp-content">
      <van-row>
        <van-col :offset="2" :span="8">
          <span>收款笔数</span>
          <p>{{ ordersNumber }}</p>
        </van-col>
        <van-col :offset="3" :span="11">
          <span>收款金额</span>
          <p>{{ ordersAmount }}</p>
        </van-col>
      </van-row>
    </div>
    <div class="dph-order-list">
      <div class="dph-order-list-item van-hairline--bottom" v-for="item in orderList">
        <van-row>
          <van-col :offset="1" :span="7">
            <p>￥{{ item.amount }}</p>
          </van-col>
          <van-col :offset="1" :span="10">
            <p>{{ item.payType }}</p>
          </van-col>
          <van-col :span="5">
            <span>{{ item.time }}</span>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Icon,
    Row,
    Field,
    Col,
    Uploader,
    Loading,
    Cell,
    CellGroup,
    Popup,
    Button,
    NavBar,
    Toast,
    Actionsheet
  } from 'vant';

  export default {
    name: 'collectionRecord',
    components: {
      [Loading.name]: Loading,
      [Toast.name]: Toast,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Uploader.name]: Uploader,
      [Row.name]: Row,
      [Col.name]: Col,
      [Cell.name]: Cell,
      [Popup.name]: Popup,
      [Field.name]: Field,
      [Actionsheet.name]: Actionsheet,
      [CellGroup.name]: CellGroup,
      [NavBar.name]: NavBar,
      [Button.name]: Button
    },
    data() {
      return {
        header: '2018-07-14',
        collectionDate: '2018年7月',
        ordersNumber: '246',
        ordersAmount: '689230.00',
        orderList: [{
          amount: '4882.20',
          payType: '微信支付',
          time: '19:37:11'
        }, {
          amount: '4882.30',
          payType: '支付宝',
          time: '18:22:00'
        }, {
          amount: '4882.30',
          payType: '支付宝',
          time: '18:22:00'
        }, {
          amount: '4882.30',
          payType: '微信支付',
          time: '13:22:55'
        }]
      };
    },
    methods: {
      onClickLeft() {
        this.$router.push('collectionRecord');
      }
    }
  };
</script>
<style lang="less" scoped>
  .dhp-content {
    padding-top: .3rem;
    height: 1.3rem;
    background: #2F66F3;
    p {
      margin: 0;
    }
    .van-row {
      height: 1.25rem;
      .van-col {
        span {
          color: #6B95FF;
          font-size: 10px;
        }
        p {
          color: #fff;
          font-size: 22px;
          font-weight: bold;
        }
      }
    }
  }

  .dph-order-date {
    p {
      margin: 0;
      height: .82rem;
      line-height: .82rem;
      padding-left: .3rem;
      color: #999;
      font-size: 11px;
    }
  }

  .dph-order-list {
    margin-top: .2rem;
    p {
      margin: 0;
    }
    .dph-order-list-item {
      height: 1.2rem;
      line-height: 1.2rem;
      background: #fff;
      .van-row {
        .van-col:nth-child(1) {
          p {
            color: #333333;
            font-size: 15px;
            font-weight: 400;
          }
        }
        .van-col:nth-child(2) {
          p {
            color: #666666;
            font-size: 15px;
            font-weight: 400;
          }
        }
        .van-col:nth-child(3) {
          color: #666;
          font-size: 13px;
          .van-icon {
            top: 1px;
          }
        }
      }
    }
    .dph-order-list-item:active {
      background-color: #FCEBEB;
    }
  }
</style>
